<template>
  <div class="taskbar">
    <div class="fiexd">
      <slot name="fiexd"></slot>
    </div>
    <div class="active">
      <slot></slot>
    </div>
  </div>
</template>

<script setup lang="ts"></script>

<style scoped lang="less">
.taskbar {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: -4rem;
  // bottom: 0;
  background: rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10px);
  border-radius: 10px;
  padding: 10px;
  // padding-top: 2rem;
  // opacity: 0.5;
  display: flex;
  padding-top: 1rem;
  transition: all 0.2s linear;

  // &::before {
  //   top: -10px;
  //   content: "";
  //   width: 3rem;
  //   height: 1rem;
  //   background: #000;
  //   z-index: 99999;
  // }

  &:hover {
    bottom: 5px;
  }

  .fiexd,
  .active {
    display: flex;
  }
}
</style>
